<template>
    <div>
        <el-dialog
            :visible.sync="show"
            :title="'添加课程分类'"
            @clsoe="cancel"
            width="35%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-tree
                class="tree"
                :data="treeData"
                ref="tree"
                node-key="id"
                default-expand-all
                :default-checked-keys="checkedkeys"
                :expand-on-click-node="false"
            >
                <span class="custom-tree-node" slot-scope="{ node }">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-checkbox
                            v-model="node.checked"
                            @change="changeCheck(node)"
                        ></el-checkbox>
                    </span>
                </span>
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitCourseCategory">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    findNatureListByTemplteId,
    findCheckedMinorCultureLabelList,
    batchUpdMinorCultureRuleForTree
} from "common/src/api/minor/minorCultureTemplate";
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        templateId: {
            type: Number,
        },
    },
    data() {
        return {
            treeData: [],
            treeDataCopy: [],
            checkedkeys: [],
        }
    },
    created() {
        this.getAllCourseCategorys();
    },
    methods: {
        getAllCourseCategorys() {
            const params = {
                id: this.templateId,
            }
            this.treeDataCopy = [];
            findNatureListByTemplteId(params).then((res) => {
                if (res && res.code === 200) {
                    let data = res.data.map((item) => {
                        return {
                            id: item.id,
                            label: item.label,
                            parentID: item.parentId
                        }
                    })
                    this.treeData = this.setTree(data)
                    this.treeDataCopy = _.cloneDeep(data);
                }
            })
            const param = {
                taringingId: this.templateId,
                type: '1'
            }
            findCheckedMinorCultureLabelList(param).then((res) => {
                this.checkedkeys = [];
                res.code == 200 && res.data.forEach((item) => this.checkedkeys.push(item.labelId))
            })
        },
        setTree(data) {
            let parent = data.filter((item) => {
                return item.parentID == null || item.parentID == 0
            })
            let child = data.filter((item) => {
                return item.parentID > 0
            })
            if (child.length > 0) {
                parent.forEach((par) => {
                    par.children = []
                    child.forEach((chi) => {
                        if (par.id == chi.parentID) {
                            par.children.push(chi)
                        }
                    })
                })
            }
            return parent
        },
        changeCheck (node) {
            if (node.childNodes && node.childNodes.length) {
                node.childNodes.forEach(row => {
                    row.checked = node.checked;
                })
            }
            if(node.parent && node.parent.childNodes.length){
                let num = 0;
                node.parent.childNodes.forEach(row =>{
                    if(row.checked){
                        num++
                    }
                })
                if(num > 0){
                    node.parent.checked = true;
                }else{
                     node.parent.checked = false;
                }
            }
        },
        submitCourseCategory() {
            let courseCheckeds = this.$refs.tree.getCheckedKeys();
            if (!courseCheckeds.length) {
                this.$message({
                    type: "warning", 
                    message: "请选择课程性质" 
                });
                return;
            }
            let minorCultureRuleList = [];
            courseCheckeds.forEach(item =>{
                let specItem = this.treeDataCopy.find(e =>{
                    return e.id == item;
                })
                if (specItem) {
                    minorCultureRuleList.push({
                        id: specItem.id,
                        labelId:specItem.id,
                        taringingId: this.templateId,
                        parentId: specItem.parentID,
                        credit: "",
                        type:1
                    })
                }
            })
            batchUpdMinorCultureRuleForTree({
                id: this.templateId,
                minorCultureRuleList: minorCultureRuleList
            }).then(res =>{
                if (res.code == 200) {
                    this.$emit('init');
                    this.cancel();
                }
            })
        },
        cancel() {
            this.checkedkeys = []
            this.$emit('update:show', false)
        },
    },
}
</script>
<style scoped>
   .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        height: 40px;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
   }
</style>